<template>
    <div>
    <br>
    <div>{{ father }}</div>
    <button @click="father += 1">Father加1</button>
    <br>
    <Son1></Son1>
    <br>
    <Son2></Son2>
    <br>
  </div>
</template>

<script>
export default {
  beforeCreate() {
    console.log("beforeCreate", "father");
  },
  created() {
    console.log("created", "father");
  },
};
</script>
<script setup>
import Son1 from './Son1.vue'
import Son2 from './Son2.vue'
console.log("setup", "father");
const father = ref("Father");
onBeforeMount(() => {
  console.log("onBeforeMount", "father");
});
onMounted(() => {
  console.log("onMounted", "father");
});
onBeforeUpdate(() => {
  console.log("onBeforeUpdate", "father");
});
onUpdated(() => {
  console.log("oneUpdated", "father");
});
onBeforeUnmount(() => {
  console.log("onBeforeUnmount", "father");
});
onUnmounted(() => {
  console.log("onUnmounted", "father");
});
</script>


<style lang="scss" scoped>

</style>